<template>
	<view>
		<!-- like.png -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="header">
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="header header-top-h5">
		<!-- #endif -->
			<scroll-view scroll-x="true" class="scroll">
				<view class="list">
					<view :class="index==0?'active item':'item'" v-for="(item,index) in 5" :key="index">全部</view>
				</view>
			</scroll-view>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" style="height: 90vh;">
				<view class="wrap">
					<view class="item" v-for="(item,index) in 10" :key="index">
						<image src="https://www.atuanjian.com/appletStatic/static/need/banner.png" mode="aspectFill"></image>
						<view class="info">
							<view class="title">【赋能之旅】油画大师主题团建活团建活动动</view>
							<view class="des">
								<text>1天0晚</text>
								<view class="line"></view>
								<text>30~100人</text>
							</view>
							<view class="bottom">
								 <view class="tip">
								 	<view class="small">得</view>
									<text>5元优惠券</text>
								 </view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.header{
		padding: 28rpx 0 28rpx 24rpx;
		.scroll{
			height: 64rpx;
			.list{
				justify-content: flex-start;
				align-items: center;
				flex-flow: row nowrap;
				white-space: nowrap;
				.item{
					padding: 0 44rpx;
					line-height: 64rpx;
					border-radius: 32rpx;
					background-color: #FFFFFF;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400; 
					color: #333333;
					margin-right: 24rpx;
				}
				.active{ 
					background: linear-gradient(180deg, #FFB850 0%, #FF8000 100%);
					color: #FFFFFF;
				}
			}
			
		}
	}
	.content{
		.wrap{
			padding: 0 30rpx;
			background-color: #FFFFFF;
			.item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-flow: row nowrap;
				padding: 30rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				image{
					width: 256rpx;
					height: 208rpx;
					border-radius: 8rpx;
				}
				.info{
					.title{
						width: 416rpx;
						height: 76rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 38rpx;
						color: #1A1A1A;
						margin-bottom: 16rpx;
						overflow: hidden;
						display: -webkit-box; 
						-webkit-box-orient: vertical; 
						-webkit-line-clamp: 2;
					}
					.des{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 32rpx;
						text{
							font-size: 24rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 32rpx;
							color: #888888;
						}
						.line{
							width: 2rpx;
							height: 20rpx;
							background-color: #888888;
							margin: 0 12rpx 0 14rpx;
						}
					}
					.bottom{
							font-size: 0;
						.tip{
							display: inline-block; 
							font-size: 0;
							border-radius: 16rpx; 
							background: linear-gradient(270deg, #FFB850 0%, #FF8000 100%);
							.small{
								display: inline-block;
								vertical-align: middle;
								width: 46rpx;
								height: 40rpx;
								text-align: center;
								line-height: 40rpx;
								background: linear-gradient(360deg, #FFBD5B 0%, #FF8F1D 100%); 
								border-radius: 16rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400; 
								color: #FFFFFF;
							}
							text{
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400; 
								color: #FFFFFF;
								display: inline-block;
								vertical-align: middle;
								line-height: 40rpx;
								padding: 0 16rpx 0 6rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
